<template>
	<view class="bigbox">
		<view class="img">
			<image class="tu" mode="widthFix" src="./tu.png" />
			<view class="po">
				<!-- <view class="titles">
					<image class="fanhui" mode="widthFix" src="./fanhui.png" />
					<view class="mingxi">分销明细</view>
				</view> -->
				<view class="words">
					<view class="left">
						<view class="price">{{yue}}</view>
						<view class="msg"> 提示金额</view>
					</view>
					<view class="right">提现</view>
				</view>
				<view class="kuai">
					<view class="contents">
						<view class="con_title">我的返佣</view>
						<view class="lines">
							<view>一级返佣</view>
							<view>{{fanyong1}}元</view>
						</view>
						<view class="lines" v-if='showerji'>
							<view>二级返佣</view>
							<view>{{fanyong2}}元</view>
						</view>
					</view>
					<view class="contents">
						<view class="con_title">我的推广者</view>
						<view class="lines">
							<view>上级</view>
							<view>{{shangji1}}</view>
						</view>
						<view class="lines" v-if='showerji'>
							<view>下级</view>
							<view>{{shangji2}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="thebox">
			<view class="top_title">
				<view class="con_title top_left">一级推广</view>
				<image class="rights" mode="widthFix" src="./rights.png" />
				<view class="all">查看全部
				</view>
			</view>
			<view class="ul">
				<view class="li" v-for="(item, index) in tuiguang1" :key="index">
					<view class="lefts">
						<view class="title">推广者</view>
						<view class="times">2025-06-12 18:00:00</view>
					</view>
					<view class="rights">
						<view>元</view>
						<view>1.00</view>
					</view>
				</view>
			</view>
		</view>
		<view class="thebox" v-if='showerji'>
			<view class="top_title">
				<view class="con_title top_left">二级推广 <view class="hides" style="margin-top: 8upx">隐藏</view>
					<image style="margin-top: 8upx" class="eye" mode="widthFix" src="./eye.png"></image>

				</view>
				<image class="rights" mode="widthFix" src="./rights.png" />
				<view class="all">查看全部
				</view>
			</view>
			<view class="ul">
				<view class="li" v-for="(item, index) in tuiguang2" :key="index">
					<view class="lefts">
						<view class="title">二级推广
						</view>
						<view class="times">2025-06-12 18:00:00</view>
					</view>
					<view class="rights">
						<view>元</view>
						<view>1.00</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	export default {
		name: "index",
		data() {
			return {
				yue: 0,
				showerji: false,
				fanyong1: 0,
				fanyong2: 0,
				tuiguang1: [],
				tuiguang2: [],
				shangji1: '',
				shangji2: ''
			};
		},
		computed: mapState({
			configInfo: state => state.config.configInfo,
			mineInfo: state => state.user.mineInfo,
			wecom_staff: state => state.user.wecom_staff,
		}),
		async onLoad() {
			await this.getUserInfo()
			this.getConfig();
		},
		components: {},
		created() {},
		methods: {
			...mapActions(['getUserInfo']),
			...mapMutations(['updateUserItem', 'updateServiceItem', 'updateTechnicianItem', 'updateOrderItem']),
			async getConfig() {
				var that = this
				console.log('============this.mineInfo===========', this.mineInfo, typeof(this.mineInfo))
				let param = {
					id: that.mineInfo.id,
					openid: that.mineInfo.openid
				}
				let data = await that.$api.usernew.getUserFanyong(param);
				console.log('datadatadatadata', data)
				// that.shangji1 = data.openid
				that.dataList[0]['num'] = data.dataist['OrderToday']
				that.dataList[1]['num'] = data.dataist['AllOrder']
				that.dataList[2]['num'] = data.dataist['CoachToday']
				that.dataList[3]['num'] = data.dataist['AllCoach']
				that.dataList[4]['num'] = data.dataist['FansToday']
				that.dataList[5]['num'] = data.dataist['AllFans']
				that.userMoney = data.userMoney
			}
		},
	};
</script>

<style>
	.top_title {
		overflow: hidden;
	}

	.li {
		width: 100%;
		padding: 24upx 0upx;
		overflow: hidden;
		border-bottom: solid 1upx rgba(0, 0, 0, 0.2);
	}

	.li:last-child {
		border-bottom: none;
	}

	.times {
		font-size: 24upx;
		color: rgba(0, 0, 0, 0.4);
	}

	.li .title {
		font-size: 30upx;
	}

	.li .rights view:nth-child(1) {
		float: right;
		margin-left: 10upx;
		line-height: 48upx;
		height: 48upx;
	}

	.li .rights view:nth-child(2) {
		float: right;
		font-weight: bold;
		line-height: 48upx;
		height: 48upx;
	}

	.li .rights {
		width: 40%;
		overflow: hidden;
		font-size: 36upx;
		height: 48upx;
		transform: translateY(20%);
	}

	.li .lefts {
		float: left;
	}


	.ul {
		overflow: hidden;
	}

	.thebox {
		width: 686upx;
		padding: 40upx;
		box-sizing: border-box;
		margin: 0 auto;
		margin-top: 32upx;
		background: #FFFFFF;
		border-radius: 26upx 26upx 26upx 26upx;
	}

	.top_left {
		float: left;
		width: 50%;
	}

	.top_left .eye {
		float: right;
		width: 40upx;
	}

	.top_left .hides {
		float: right;
		margin-left: 5upx;
		width: 40upx;
		font-size: 24upx;
		color: rgba(0, 0, 0, 0.4);
		width: 100upx;
	}

	.all {
		float: right;
		color: rgba(0, 0, 0, 0.4);
		font-size: 24upx;
		margin-right: 4upx;
	}

	.rights {
		width: 15upx;
		margin-left: 10upx;
		/* height: 32upx; */
		float: right;
	}

	.lines>view:nth-child(2) {
		font-size: 30upx;
		float: right;
	}

	.lines:nth-child(2) {
		margin-top: 30upx;
	}

	.lines:nth-child(3) {
		margin-top: 18upx;
	}

	.lines>view:nth-child(1) {
		font-size: 24upx;
		color: rgba(0, 0, 0, 0.6);
		float: left;
	}

	.lines {
		overflow: hidden;
	}

	.con_title {
		font-size: 32upx;
		font-weight: bold;
		position: relative;
		padding-left: 28upx;
	}

	.con_title::before {
		content: "";
		position: absolute;
		left: 0;
		width: 8upx;
		height: 32upx;
		background: #0CAD7D;
		border-radius: 4upx 4upx 4upx 4upx;
	}

	.contents {
		padding: 34upx 32upx;
		box-sizing: border-box;
		width: 328upx;
		height: 244upx;
		background: linear-gradient(160deg, #DDFFFD, #fff);
		border-radius: 26upx 26upx 26upx 26upx;
		margin: 0 14upx;
	}

	.kuai {
		display: flex;
		justify-content: center;
		margin-top: 32upx;
		justify-items: center;
	}

	.tu {
		width: 100%;
	}

	.words {
		overflow: hidden;
	}

	.words .left {
		float: left;
		margin-left: 42upx;
	}

	.words .right {
		float: right;
		margin-right: 40upx;
		width: 192upx;
		height: 68upx;
		line-height: 68upx;
		font-size: 30upx;
		color: white;
		text-align: center;
		transform: translateY(60%);
		background: #0CAD7D;
		border-radius: 20upx 20upx 20upx 20upx;
	}

	.msg {
		font-size: 24upx;
		color: rgba(0, 0, 0, 0.6);
		margin-top: 16upx;
	}

	.price {
		font-size: 48upx;
		color: #000;
	}

	.mingxi {
		text-align: center;
		color: #171725;
	}

	.fanhui {
		position: absolute;
		left: 50upx;
		line-height: 88upx;
		width: 88upx;
	}

	.titles {
		line-height: 88upx;
	}

	.img {
		width: 100%;
		height: 586upx;
		display: block;
		position: relative;
	}

	.po {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		padding-top: 96upx;
		box-sizing: border-box;
	}

	.bigbox {
		width: 100%;
		min-height: 100vh;
		background: #F6F6F6;
		padding-bottom: 50upx;
	}
</style>